<!DOCTYPE html>
<html lang="zh-CN" ng-app="app">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>Jason Web RTC</title>


<!-- External CSS -->
<link rel="stylesheet" href="css/bootstrap-combined.min.css">

<!-- In-document CSS -->
<style>
  /* ... */
</style>
<!-- JavaScript -->
<script type="text/javascript" src="libs/angular.min.js"></script>
</head>
<body ng-model="client">
<div>

</div>

<div  my-controller="myController">
<input type="text" ng-model="text" />
<br/>
<p>{{text}}</p>
<hr/>

<button ng-click="saveM()">Save</button>

<div my-controller="myController" needs-focus="inputMethod">
<ul>
  <li ng-repeat="mail in emails">
    <div 
      ng-show="!mail.showActions"
      ng-swipe-left="mail.showActions=true">
      <div class="from">
        From: <span>{{ mail.from }}</span>
      </div>
      <div class="body">
        {{ mail.body }}
      </div>
    </div>
    <div
      ng-show="mail.showActions"
      ng-swipe-right="mail.showActions=false">
      <ul class="actions">
        <li><button>Archive</button></li>
        <li><button>Trash</button></li>
      </ul>
    </div>
  </li>
</ul>
</div>

</div>


<div ng-controller="TestCtrl">
      I  set the global variable.<strong>{{$root.name}}</strong>
  </div>

  <div ng-controller="Test111Ctrl">
      1,get global variable .<strong>{{name}}</strong><br>
      2,get global variable .<strong>{{$root.name}}</strong>
  </div>
  
  
<script type="text/javascript">
angular.module('app', []);
angular.module('app', []).controller('clientController', ['$scope',
  function clientController($scope) {
	
   $scope.inputMethod = true;
	$scope.$watch('text', function textChange(text){
		$scope.inputMethod = !$scope.inputMethod;
    });
	
	$scope.$on("resetText", function changeText(event, v){
		$scope.text = v;
	});
	
	$scope.saveM =  function iSave(){
		console.log("save :"+ new Date().getTime());
	};
  
}]);	
angular.module('app')
.directive('myController', [function guacTextInput() {

    return {
        restrict: 'EA',
        scope: {

            /**
             * Whether the text input UI should have focus. Setting this value
             * is not guaranteed to work, due to browser limitations.
             * 
             * @type Boolean
             */
            needsFocus : '=?'

        },

        controller: ['$scope', '$rootScope', '$element', '$timeout',
            function guacTextInput($scope, $rootScope, $element, $timeout) {
        	$scope.emails = [
        	                 {from:"Sean", showActions : true, to : "Anand", body : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. "}, 
        	                 {from:"Q", showActions : false, to : "Sean",  body : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. "}
        	                 ];
        	$scope.$watch('needsFocus', function focusDesireChanged(focusNeeded) {

                if (focusNeeded)
                    console.log("now focusNeeded");
                else
                	console.log("now blur :"+ new Date().getTime());
                
                $rootScope.$broadcast('resetText', new Date().getTime()); 

            });
        	
        	
        }]};
}]);

angular.module('app').controller('TestCtrl',['$scope','$rootScope',
                                   function($scope,$rootScope) {
                                       $rootScope.name = 'this is test';
                                   }
                               ]);

angular.module('app').controller('Test111Ctrl',['$scope','$rootScope',
                     function($scope,$rootScope) {
                         $scope.name = $rootScope.name;
                         }
]);
</script>
</body>
</html>